<template>
  <div class="wrap">
    <div class="title">商家后台管理系统</div>
    <div class="login">
      <div class="card">
        <div class="title log">登录</div>
        <el-form class="form" :model="form" :rules="rules" ref="form" label-width="">
          <el-form-item class="four" prop="userName" size="small">
            <el-input placeholder="账 号" v-model="form.userName" minlength="6" maxlength="30"></el-input>
          </el-form-item>
          <el-form-item class="four" prop="userPassword" size="small">
            <el-input placeholder="密 码" type="password" v-model="form.userPassword" minlength="8" maxlength="32"></el-input>
          </el-form-item>
          <div class="ymas">
            <el-form-item class="yan" prop="imageCode" size="small">
              <el-input placeholder="验证码" v-model="form.imageCode" @keyup.enter.native = "login" ></el-input>
            </el-form-item>
            <div class="getimg1" @click = "init">
              <img :src="form.imag" alt=""/>
            </div>
          </div>
          <div class="bigbtn">
            <el-button class="setup" type="primary" :loading = "loading" @click="login" size="small">登录</el-button>
          </div>
          <div class="nius">
            <el-button class="noaccount" @click="toregister" type="text" size="small">还没账号？立即注册</el-button>
            <el-button type="text" @click="forgetPwd" size="small">忘记密码</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
// import md5 from 'js-md5'
export default {
  name: 'login',
  data () {
    return {
      form: {
        userName: '',
        userPassword: '',
        imageCode: '',
        imag: ''
      },
      loading: false,
      rules: {
        userName: [
          { required: true, message: '请填写账号！', trigger: 'blur' },
          { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,30}$/, message: '6-30位英文或英文+数字', trigger: 'blur' }
        ],
        userPassword: [
          { required: true, message: '请填写密码！', trigger: 'blur' },
          { pattern: /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{8,32}$/, message: '密码8-32位，必须同时大小写+数字组合', trigger: 'blur' }
        ],
        imageCode: [
          { required: true, message: '请填写验证码！', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.$tkAjax.get(`${this.$config.baseUrl}/user/merchantUser/captcha`).then(res => {
        this.form.imag = 'data:image/png;base64,' + res.data.content
      }).catch(err => {
        this.$message.warning(err.message)
      })
    },
    toregister () {
      this.$router.push('/register')
    },
    login () {
      this.$refs.form.validate((valid) => {
        // let userPassword = this.$md5(this.form.userPassword)
        if (valid) {
          let json = {
            userName: this.form.userName,
            userPassword: this.$md5(this.form.userPassword),
            imageCode: this.form.imageCode
          }
          this.loading = true
          this.$tkAjax.post(`${this.$config.baseUrl}/user/merchantUser/login`, {}, {
            params: json
          })
            .then(res => {
              // this.form = res.data.content
              this.$store.commit('setToken', res.data.content.tokenStr)
              this.$store.commit('setUserid', res.data.content.userId)
              this.$store.commit('setSystemId', res.data.content.systemId)
              this.$tkAjaxGlobal.headers['Content-Type'] = 'application/x-www-form-urlencoded'
              this.$message.success(res.data.message)
              return this.$store.dispatch('getUserInfo', res.data.content.userId)
            }).then(() => {
              this.loading = false
              if (this.$store.state.settled === '') {
                this.$router.replace('/submitdata')
              } else if (this.$store.state.settled === '0') {
                this.$router.replace('/unsubmit')
              } else {
                this.$router.push('/')
              }
            }).catch(err => {
              this.loading = false
              this.$message.warning(err.data.message)
              this.init()
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    forgetPwd () {
      this.$router.push('/findPwd')
    }
  }
}
</script>
<style lang="scss" scope>
.wrap {
  .title {
    padding: 67px 100px;
    font-family: 'PingFang-SC';
    font-size: 37px;
    color: #4B4B4B;
    line-height: 56px;
  }
  .login {
    width: 100%;
    height: 616px;
    background-image: url('../../../assets/images/bg.png');
    background-size: 100% 100%;
    .card {
      width: 499px;
      background: #f5f5f5;
      float: right;
      border-radius: 6px;
      margin: 106px 67px;
      .log {
        padding: 0;
        font-size: 28px;
        text-align: center;
        line-height: 44px;
        margin: 13px 0 20px 0;
        font-weight: 546;
      }
      .form {
        text-align: center;
        .four {
          .el-form-item__content {
            .el-form-item__error {
              left: 49px;
            }
            .el-input {
              width: 400px;
              .el-input__inner {
                background-color: #eef9fb;
              }
            }
          }
        }
        .ymas {
          padding: 0 23px;
          display: flex;
          justify-content: space-around;
          .yan {
            .el-form-item__content {
              .el-input {
                width: 230px;
                .el-input__inner {
                  background-color: #eef9fb;
                }
              }
            }
          }
        }
        .bigbtn {
          .el-button {
            width: 400px;
            height: 37px;
            font-size: 18px;
            background-color: #74acdf;
          }
        }
        .nius {
          padding: 10px 0;
          display: flex;
          justify-content: space-around;
          .el-button {
            color: #82858B;
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>
